<style>


    .container {
        max-width: 1140px;
    }

    .page-title {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--dark);
    }

    .page-subtitle {
        color: var(--gray);
        margin-bottom: 3rem;
        max-width: 700px;
    }

    /**** 内容 ****/
    .contact-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;
        height: 100%;
    }

    .contact-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    .contact-card .contact-card-body {
        padding: 2rem;
    }

    .contact-card .contact-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: var(--primary-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        color: var(--primary);
        font-size: 1.5rem;
    }

    .contact-card .contact-title {
        font-weight: 600;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .contact-card .contact-info {
        color: var(--gray);
        margin-bottom: 1rem;
    }

    .contact-card .contact-link {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
    }

    .contact-card .contact-link:hover {
        color: #0E42D2;
        text-decoration: underline;
    }

    /**** 表单 ****/
    .form-section {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 2.5rem;
        margin-top: 2rem;
    }

    .form-section .form-title {
        font-weight: 600;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .form-section .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--dark);
    }

    .form-section .form-control {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 1rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-section .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        outline: none;
    }

    .form-section .form-text {
        color: var(--gray);
        font-size: 0.875rem;
    }

    .form-section .submit-btn {
        background-color: var(--primary);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px 24px;
        font-weight: 500;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .form-section .submit-btn:hover {
        background-color: #0E42D2;
    }

    /**** 问答 ****/
    .faq-section {
        margin-top: 4rem;
    }

    .faq-section .faq-title {
        font-weight: 600;
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .faq-section .accordion-item {
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .faq-section .accordion-header {
        background-color: white;
        padding: 0;
    }

    .faq-section .accordion-button {
        width: 100%;
        text-align: left;
        padding: 1rem 1.25rem;
        font-weight: 500;
        color: var(--dark);
        background-color: white;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .faq-section .accordion-button:not(.collapsed) {
        background-color: var(--primary-light);
        color: var(--primary);
        box-shadow: none;
    }

    .faq-section .accordion-body {
        padding: 1rem 1.25rem;
        color: var(--gray);
        border-top: 1px solid var(--border);
    }

    /**** 地图 ****/
    .map-container {
        height: 300px;
        background-color: #E8ECEF;
        border-radius: 8px;
        margin-top: 1rem;
        overflow: hidden;
        position: relative;
    }

    .map-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray);
        flex-direction: column;
        gap: 10px;
    }

    .map-placeholder i {
        font-size: 2rem;
    }

    @media (max-width: 768px) {
        .page-title {
            font-size: 1.8rem;
        }

        .contact-card .contact-card-body {
            padding: 1.5rem;
        }

        .form-section {
            padding: 1.5rem;
        }
    }
</style>

<div class="container">
    <!-- 页面标题 -->
    <div class="text-center mb-5">
        <h1 class="page-title">联系我们</h1>
        <p class="page-subtitle mx-auto">如果您有任何问题、建议或反馈，欢迎通过以下方式与我们联系。我们会尽快回复您的咨询。</p>
    </div>

    <!-- 联系方式卡片 -->
    <div class="row g-4 mb-5">
        <!-- 电子邮件 -->
        <div class="col-md-6 col-lg-3">
            <div class="contact-card">
                <div class="contact-card-body">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h3 class="contact-title">电子邮件</h3>
                    <p class="contact-info">发送邮件给我们，我们会在24小时内回复</p>
                    <a href="mailto:support@socialplatform.com" class="contact-link">support@socialplatform.com</a>
                </div>
            </div>
        </div>

        <!-- 电话联系 -->
        <div class="col-md-6 col-lg-3">
            <div class="contact-card">
                <div class="contact-card-body">
                    <div class="contact-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <h3 class="contact-title">电话联系</h3>
                    <p class="contact-info">工作时间内拨打我们的客服热线</p>
                    <a href="tel:+8610123456789" class="contact-link">400-123-4567</a>
                </div>
            </div>
        </div>

        <!-- 社交媒体 -->
        <div class="col-md-6 col-lg-3">
            <div class="contact-card">
                <div class="contact-card-body">
                    <div class="contact-icon">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <h3 class="contact-title">社交媒体</h3>
                    <p class="contact-info">关注我们的官方账号获取最新资讯</p>
                    <div class="d-flex gap-3 mt-2">
                        <a href="#" class="contact-link"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="contact-link"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="contact-link"><i class="fab fa-qq fa-lg"></i></a>
                        <a href="#" class="contact-link"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 办公地址 -->
        <div class="col-md-6 col-lg-3">
            <div class="contact-card">
                <div class="contact-card-body">
                    <div class="contact-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h3 class="contact-title">办公地址</h3>
                    <p class="contact-info">北京市朝阳区科技园区88号社交大厦</p>
                    <p class="contact-info">工作时间: 周一至周五 9:00-18:00</p>
                    <div class="map-container">
                        <div class="map-placeholder">
                            <i class="fas fa-map"></i>
                            <span>地图加载中...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 联系表单 -->
    <div class="form-section">
        <h2 class="form-title">发送消息</h2>
        <form>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="name" class="form-label">您的姓名</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入您的姓名" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="email" class="form-label">电子邮箱</label>
                        <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱地址" required>
                        <div class="form-text">我们不会向第三方分享您的邮箱</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="phone" class="form-label">联系电话（选填）</label>
                        <input type="tel" class="form-control" id="phone" placeholder="请输入您的联系电话">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="subject" class="form-label">问题类型</label>
                        <select class="form-control" id="subject" required>
                            <option value="">请选择问题类型</option>
                            <option value="account">账号相关</option>
                            <option value="function">功能使用</option>
                            <option value="payment">支付问题</option>
                            <option value="report">举报投诉</option>
                            <option value="suggestion">意见建议</option>
                            <option value="other">其他问题</option>
                        </select>
                    </div>
                </div>
                <div class="col-12">
                    <div class="mb-3">
                        <label for="message" class="form-label">您的消息</label>
                        <textarea class="form-control" id="message" rows="5" placeholder="请详细描述您的问题或建议..."
                                  required></textarea>
                        <div class="form-text">请尽可能详细地描述您的问题，以便我们更好地为您解决</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="agreement" required>
                        <label class="form-check-label" for="agreement">
                            我同意平台根据<a href="#" class="contact-link">隐私政策</a>处理我的个人信息
                        </label>
                    </div>
                </div>
                <div class="col-12">
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane me-2"></i>发送消息
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 常见问题 -->
    <div class="faq-section">
        <h2 class="faq-title">常见问题</h2>
        <div class="accordion" id="faqAccordion">
            <!-- 问题1 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        如何找回我的账号密码？
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        您可以点击登录页面的"忘记密码"链接，通过注册邮箱或手机号接收验证码进行密码重置。如果您无法通过上述方式找回密码，请联系我们的客服团队，提供相关身份信息进行验证后，我们将协助您找回账号。
                    </div>
                </div>
            </div>

            <!-- 问题2 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        账号被封禁了该怎么办？
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        如果您的账号被封禁，系统会通过短信或邮件通知您具体原因和封禁时长。如果您对封禁有异议，可以通过申诉表单提交您的申诉理由，我们的审核团队会在24小时内重新审核您的情况并给予回复。
                    </div>
                </div>
            </div>

            <!-- 问题3 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        如何举报违规内容或用户？
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        您可以在相关内容或用户主页点击"举报"按钮，选择举报原因并提交。我们会在12小时内处理您的举报，并根据平台规则采取相应措施。对于紧急情况，您可以通过客服热线优先处理您的举报。
                    </div>
                </div>
            </div>

            <!-- 问题4 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        如何申请成为平台的内容创作者？
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        您可以在平台的"创作者中心"提交申请，填写相关信息并上传作品示例。我们的审核团队会在3个工作日内审核您的申请，审核通过后会通过邮件发送通知，并为您开通创作者权限和相关功能。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
	// 表单提交处理
	document.querySelector('form').addEventListener('submit', function (e) {
		e.preventDefault();

		// 在实际应用中，这里会有表单验证和数据提交逻辑
		const formData = new FormData(this);
		const formValues = Object.fromEntries(formData.entries());

		// 模拟提交成功
		alert('您的消息已成功发送！我们会尽快与您联系。');
		this.reset();
	});

	// 地图加载模拟
	setTimeout(() => {
		const mapPlaceholder = document.querySelector('.map-placeholder');
		if (mapPlaceholder) {
			mapPlaceholder.innerHTML = `
                    <img src="https://picsum.photos/800/400?random=50" alt="办公地址地图" style="width:100%;height:100%;object-fit:cover;">
                `;
		}
	}, 1500);
</script>

    
